<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        const mainFont = 'italic bold 20px Times New Roman';
        ctx.font = mainFont;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Center of the coordinate system
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2 - 20;

        // Parameters for the diagram
        const l = 120; // length of the rod from center to charge
        const angleDeg = 25; // angle in degrees
        const angleRad = angleDeg * Math.PI / 180;

        // Helper function to draw an arrow
        function drawArrow(fromX, fromY, toX, toY) {
            const headlen = 10; // length of head in pixels
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // 1. Draw Coordinate Axes
        // X-axis
        drawArrow(50, centerY, canvas.width - 50, centerY);
        ctx.fillText('x', canvas.width - 40, centerY + 5);
        // Y-axis
        drawArrow(centerX, canvas.height - 80, centerX, 50);
        ctx.fillText('y', centerX + 5, 40);
        // Origin label
        ctx.font = '18px Times New Roman';
        ctx.fillText('0', centerX - 12, centerY + 12);
        ctx.font = mainFont;


        // 2. Calculate charge positions
        const x_upper = centerX + l * Math.cos(angleRad);
        const y_upper = centerY - l * Math.sin(angleRad);
        const x_lower = centerX - l * Math.cos(angleRad);
        const y_lower = centerY + l * Math.sin(angleRad);

        // 3. Draw the rotating line
        ctx.beginPath();
        ctx.moveTo(x_lower, y_lower);
        ctx.lineTo(x_upper, y_upper);
        ctx.stroke();

        // 4. Draw the charges
        // Upper charge
        ctx.beginPath();
        ctx.arc(x_upper, y_upper, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('e', x_upper + 18, y_upper - 5);

        // Lower charge
        ctx.beginPath();
        ctx.arc(x_lower, y_lower, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('e', x_lower - 18, y_lower + 5);


        // 5. Draw velocity vectors
        const v_len = 50;
        // Velocity angle is position angle + 90 degrees for counter-clockwise rotation
        const v_angle_upper = angleRad + Math.PI / 2;
        const v_angle_lower = angleRad - Math.PI / 2;

        // Upper velocity vector
        const vx_upper_end = x_upper + v_len * Math.cos(v_angle_upper);
        const vy_upper_end = y_upper - v_len * Math.sin(v_angle_upper);
        drawArrow(x_upper, y_upper, vx_upper_end, vy_upper_end);
        ctx.fillText('v', vx_upper_end - 15, vy_upper_end);

        // Lower velocity vector
        const vx_lower_end = x_lower + v_len * Math.cos(v_angle_lower);
        const vy_lower_end = y_lower - v_len * Math.sin(v_angle_lower);
        drawArrow(x_lower, y_lower, vx_lower_end, vy_lower_end);
        ctx.fillText('v', vx_lower_end + 15, vy_lower_end);


        // 6. Draw labels 'l'
        const l_label_offset_dist = 15;
        // Upper 'l'
        const midX_upper = centerX + 0.5 * l * Math.cos(angleRad);
        const midY_upper = centerY - 0.5 * l * Math.sin(angleRad);
        const l_label_upper_x = midX_upper - l_label_offset_dist * Math.sin(angleRad);
        const l_label_upper_y = midY_upper - l_label_offset_dist * Math.cos(angleRad);
        ctx.fillText('l', l_label_upper_x, l_label_upper_y);

        // Lower 'l'
        const midX_lower = centerX - 0.5 * l * Math.cos(angleRad);
        const midY_lower = centerY + 0.5 * l * Math.sin(angleRad);
        const l_label_lower_x = midX_lower - l_label_offset_dist * Math.sin(angleRad);
        const l_label_lower_y = midY_lower - l_label_offset_dist * Math.cos(angleRad);
        ctx.fillText('l', l_label_lower_x, l_label_lower_y);


        // 7. Draw the angle arc and label
        // Angle arc
        const arcRadius = 50;
        ctx.beginPath();
        ctx.arc(centerX, centerY, arcRadius, 0, -angleRad, true); // counter-clockwise
        ctx.stroke();
        
        // Angle Label 'ωt/2'
        const labelRadius = arcRadius + 22;
        const labelAngle = angleRad / 2;
        const labelX = centerX + labelRadius * Math.cos(labelAngle);
        const labelY = centerY - labelRadius * Math.sin(labelAngle);
        
        ctx.font = 'italic 22px Times New Roman'; 
        ctx.fillText('ωt', labelX, labelY - 8);
        ctx.beginPath();
        ctx.moveTo(labelX - 18, labelY + 3);
        ctx.lineTo(labelX + 18, labelY + 3);
        ctx.stroke();
        ctx.font = '22px Times New Roman';
        ctx.fillText('2', labelX, labelY + 16);
        ctx.font = mainFont; // Reset font


        // 8. Draw the figure caption
        ctx.font = 'bold 20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 4.31', centerX, canvas.height - 20);

    </script>
</body>
</html>